Next.js Data Fetching
Next.jsは page/配下でページを記述するけど、そのページコンポーネントのpropsに入れるデータを渡す方法として、 getInitialProps
SSRで。パラメータに、contextを取る。pathname, query, req, res, err. reqeust headerなども取れる。
getServerSideProps
SSRだが、rendingは requestが来たときにされる。requestのたびにデータが変わる場合などに
dynamic routingでページ名を確定させておきたいので必要 getStaticPropsと併用する
fallbackに、paths以外のものがrequestされた際に動作を決定させる
false: 404
getStaticProps
getInitialPropsと何が違うの???
必ず、server sideで実行される。getInitialPropsはclient側から実行に可能性がある。(next link)
以下の記事に解説されていて参考にした。
Layoutといっしょに使う場合のaproach. page, propsを引数にとる getLayout()
typescriptの場合は、Layout関数componentの型を合わせないといけなさそう #TODO こちらも参考にする